<ul id="monitor_baseinfo" class="contextmenu" style="display:none;border: none;padding-bottom: 1px;background-color: rgba(57,106,136,0);z-index: 999;" tabindex="999">
	<li>
		<div data-block="win" class="panel panel-default panel-style float-panel active" style="height: 200px;width: 300px;background-color: #1b1b1f;border-radius: 0;">
		    <div class="" style="background-color: #15508a;padding: 10px;">
			   <span style="color: white;font-size: 12px;">基本信息</span>
			</div>
			<div class="w-all" >
			    <div id="showmonitorData" class="table_div">
			    </div>
			</div>
		</div>
	</li>
</ul>

<div class="topo-editor shrink-left">
	<div class="topo-left">
		<div class="wraper" id="canvasTool" style="padding-top: 30px;padding-bottom: 30px;">
		</div>
	</div>
	<div class="topo-right">
		<div class="menu-bar">
			<div class="p-title">
				<p>拓扑图名称显示位置</p>
			</div>
			<ul class="ul-caozuo ui-align ul-separator" style="color: white;left: 10px;">
				<li class="" data-id='zoom_reset' data-wenk='还原' data-wenk-pos="bottom" >
					<i class="icon icon-search topo" style="color:white;font-size: 16px;display: flex;align-items: center;justify-content: center;"></i>
				</li>
				<li class="" data-id='zoom_in' data-wenk='放大' data-wenk-pos="bottom" >
					<i class="icon icon-zoom-in topo" style="color:white;font-size: 16px;display: flex;align-items: center;justify-content: center;"></i>
				</li>
				<li class="" data-id='zoom_out' data-wenk='缩小' data-wenk-pos="bottom" >
					<i class="icon icon-zoom-out topo" style="color:white;font-size: 16px;display: flex;align-items: center;justify-content: center;"></i>
				</li>
				<li class="" data-id='query' data-wenk='查询' data-wenk-pos="bottom" >
					<i class="icon icon-road topo" style="color:white;font-size: 16px;display: flex;align-items: center;justify-content: center;"></i>
				</li>
				<li class="" data-id='clearState' data-wenk='重置节点选中状态' data-wenk-pos="bottom" >
					<i class="icon icon-inbox topo" style="color:white;font-size: 16px;display: flex;align-items: center;justify-content: center;"></i>
				</li>
				<li class="" data-id='toTopo' data-wenk='网络拓扑' data-wenk-pos="bottom" >
					<i class="icon icon-sitemap topo" style="color:white;font-size: 16px;display: flex;align-items: center;justify-content: center;"></i>
				</li>
			</ul>
			<a class="toggle-btn-right active" href="javascript:void(0);" style="">
				<i class="toggle"></i>
			</a>
		</div>
		<div class="drawing-board-bg">
			<div class="drawing-board">
				<div class="board" style="background-color: #0c0c0e;">
					<canvas id="canvas" width="800px" height="500px"></canvas>
				</div>
			</div>
		</div>
	</div>
	<div class="topo-right-info">
		<div class="right-info-wraper">
			<div class="right-info-panel">
				<div class="right-info-title">组件状态分布</div>
				<div class="cut-off"></div>
				<div class="right-info-content">
					<div class="right-info-content-wraper">
						
						<div id="app_monitor_status" class="app_monitor_status">
							<span class="status-block"></span>
							<span>当前业务系统状态</span>
						</div>
						<div class="status_chart" id="picanvas_parent"></div>
					</div>
				</div>
			</div>
			<div class="right-info-panel">
				<div class="right-info-title">组件展示</div>
				<div class="cut-off"></div>
				<div class="right-info-content" style="height: 300px;">
					<div id="item-table-wraper" style="height: 300px;">
						<table style="width: 100%;">
							<thead>
								<tr style="text-align: center;">
									<th style="padding: 6px 0px 6px 33px;text-align: left;width: 70%;">组件名称</th>
									<th style="padding: 6px 0px;text-align: center;width: 30%;">组件类型</th>
								</tr>
							</thead>
							<tbody id="com-show-tips"></tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="module/monitor_obj/app_monitor_show_detail.js"></script>